<script>
import QuickLayout from '@/components/EmpsLayout/index.vue'
import ProcessImage from '@/components/PrcoessImage/index.vue'
import { parseTime } from '../../../utils/ruoyi'

export default {
  name: 'SystemMenu',
  components: { ProcessImage, QuickLayout },
  data() {
    return {
      dataListUrl: '/task/todo-page',
      deleteUrl: '/sys/menu',
      processDefinitionId: null,
      processInstanceId: null,
      businessKey: null,
      visible: false
    }
  },
  methods: {
    parseTime,
    handleTask(row) {
      this.$router.push({ name: 'TaskHandle', query: row })
    },
    openView(row) {
      this.processDefinitionId = row.processDefinitionId
      this.processInstanceId = row.processInstanceId
      this.businessKey = row.businessKey
      this.visible = true
    }
  }
}
</script>

<template>
  <quick-layout
    ref="RefMenu"
    row-key="id"
    :is-operate-btn="false"
    :is-operate="false"
    :data-list-url="dataListUrl"
    :delete-url="deleteUrl"
    size="small"
  >
    <template #query="{query}">
      <el-form-item label="查询">
        <el-input v-model="query.name" placeholder="请输入关键字" />
      </el-form-item>
    </template>
    <template>
      <el-table-column prop="processName" label="标题" header-align="center" min-width="150">
        <template v-slot="{row}">
          <span style="color: #1890ff;cursor: pointer" @click="handleTask(row)">{{ row.processName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="所属流程" header-align="center" align="center" prop="processDefinitionName" width="250" :show-overflow-tooltip="true">
        <template v-slot="scope">
          <span style="color: #1890ff;cursor: pointer" title="查看" @click="openView(scope.row)">{{ scope.row.processDefinitionName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="任务节点" header-align="center" align="center" />
      <el-table-column prop="startUser" label="流程发起人" header-align="center" align="center" />
      <el-table-column prop="createTime" label="到达时间" header-align="center" align="center" width="150">
        <template v-slot="{row}">
          <span>{{ parseTime(row.createTime) }}</span>
        </template>
      </el-table-column>
    </template>
    <template #component>
      <el-dialog title="查看流程图" modal-append-to-body :visible.sync="visible" width="70%">
        <process-image :process-definition-id="processDefinitionId" :business-key="businessKey" :process-instance-id="processInstanceId" />
      </el-dialog>
    </template>
  </quick-layout>
</template>

<style scoped lang="scss">

</style>

